<template>
  <div class="page-wrapper">
    <div id="left-arrow" class="arrow" @click="previousQuestion" />
    <div class="container">
      <section id="question-area">
        <div id="title">
          <p>LETTER_NUMBER_MATCH</p>
        </div>
        <div id="left-columns">
          <div v-for="(item, index) in leftColumn" :key="index" class="column" @click="chooseLeft(index)">{{ item }}</div>
        </div>
        <canvas id="line-area" ref="CANVAS" />
        <div id="right-columns">
          <div v-for="(item, index) in rightColumn" :key="index" class="column" @click="chooseRight(index)">{{ item }}</div>
        </div>

        <div>
          <el-button id="reset" @click="reset">Reset</el-button>
          <el-button id="submit" @click="submit">Submit</el-button>
        </div>
      </section>
      <section id="progress-area">
        <p>Progress:</p>
        <el-progress :text-inside="true" :stroke-width="26" :percentage="progress" color="#333333" />
      </section>
      <section style="text-align: center;">
        <el-button @click="goBack">Quit</el-button>
      </section>
    </div>
    <div id="right-arrow" class="arrow" @click="nextQuestion" />
  </div>
</template>

<script>
import { getLetterNumberMatchData } from '@/api/questions/getLetterNumberMatch'

export default {
  name: 'LetterNumberMatch',
  components: {},
  data() {
    return {
      finishedQuestionNum: 0,
      totalQuestionNum: 0,
      questionData: [],

      // 当前显示的题目
      currIndex: 0,
      leftColumn: [],
      rightColumn: [],

      // 答案记录
      answer: [0, 0, 0, 0],

      // 用于绘图的变量
      lastChooseSide: 0,
      lastChooseIndex: 0,
      leftIndexChoosed: [],
      rightIndexChoosed: []
    }
  },

  computed: {
    progress: {
      get() {
        return this.finishedQuestionNum / this.totalQuestionNum * 100
      },
      set(value) {
        return value
      }
    }
  },

  created() {
    getLetterNumberMatchData().then(response => {
      this.finishedQuestionNum = 0
      this.currIndex = 0
      this.totalQuestionNum = response.questionNumber
      this.questionData = response.data
      this.leftColumn = this.questionData[this.currIndex].leftColumn
      this.rightColumn = this.questionData[this.currIndex].rightColumn
      this.progress = 0
    })

    // const canvas = this.$refs.CANVAS;
    // let width = canvas.width,height=canvas.height;
    // if (window.devicePixelRatio) {
    //     canvas.style.width = width + "px";
    //     canvas.style.height = height + "px";
    //     canvas.height = height * window.devicePixelRatio;
    //     canvas.width = width * window.devicePixelRatio;
    //     const ctx = c.getContext('2d')
    //     ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
    // }
  },

  methods: {
    previousQuestion() {
      if (this.currIndex === 0) {
        this.$message({
          message: '已经到底啦！',
          center: true
        })
      } else {
        this.currIndex -= 1
        this.updateQuestion()
      }
    },

    nextQuestion() {
      if (this.currIndex === this.finishedQuestionNum) {
        this.$message({
          message: '不要偷懒哦！先做完本题才能进入下一题',
          center: true
        })
      } else {
        this.currIndex += 1
        this.updateQuestion()
      }
    },

    updateQuestion() {
      this.leftColumn = this.questionData[this.currIndex].leftColumn
      this.rightColumn = this.questionData[this.currIndex].rightColumn
      this.reset()
    },

    chooseLeft(index) {
      if (index in this.leftIndexChoosed) {
        return
      } else {
        if (this.lastChooseSide === 1) {
          this.answer.splice(index, 1, this.lastChooseIndex)
          this.drawLine(index, this.lastChooseIndex)
        } else {
          this.lastChooseSide = -1
          this.lastChooseIndex = index
        }
      }
    },

    chooseRight(index) {
      if (index in this.rightIndexChoosed) {
        return
      } else {
        if (this.lastChooseSide === -1) {
          this.answer.splice(this.lastChooseIndex, 1, index)
          this.drawLine(this.lastChooseIndex, index)
        } else {
          this.lastChooseSide = 1
          this.lastChooseIndex = index
        }
      }
    },

    drawLine(leftIndex, rightIndex) {
      const c = this.$refs.CANVAS
      const ctx = c.getContext('2d')
      ctx.moveTo(0, 22 + 38 * leftIndex)
      ctx.lineTo(300, 22 + 38 * rightIndex)
      ctx.strokeStyle = 'gray'
      ctx.stroke()

      // 清除选择
      this.lastChooseSide = 0
      this.lastChooseIndex = 0
    },

    submit() {
      console.log(this.answer)
      for (const index in this.answer) {
        if (this.answer[index] !== this.questionData[this.currIndex].answer[index]) {
          this.$message('回答错误')
          return
        }
      }
      this.$message('回答正确')
      if (this.currIndex === this.finishedQuestionNum) { this.finishedQuestionNum++ }
    },

    reset() {
      const c = this.$refs.CANVAS
      const temp = c.height
      c.height = temp

      this.lastChooseSide = 0
      this.lastChooseIndex = 0
      this.answer = [0, 0, 0, 0]
    },

    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
    color: white;
  }

  .page-wrapper{
    min-height: 100%;
    min-width: 1000px;
    background-color: black;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .arrow{
    width: 40px;
    height: 40px;
    border-top: 2px solid gray;
    border-right: 2px solid gray;
  }

  .arrow:hover{
    border-color: white;
    cursor: pointer;
  }

  #left-arrow{
    transform: rotate(-135deg);
  }

  #right-arrow{
    transform: rotate(45deg);
  }

  .container{
    width: 900px;
  }

  #question-area{
    width: 100%;
    height: 600px;
    border: solid 2px gray;
    position: relative;
  }

  #title{
    border-left: 15px solid gray;
    height: 70px;
    margin: 20px 0 0 20px;
  }

  #title>p{
    line-height: 70px;
    padding-left: 15px;
  }

  #left-columns{
    position: absolute;
    width: 250px;
    height: 400px;
    left: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  #line-area{
    position: absolute;
    width: 200px;
    height: 400px;
    left: 350px;
  }

  #right-columns{
    position: absolute;
    width: 250px;
    height: 400px;
    right: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .column{
    width: 250px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #333;
  }

  #reset{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-180px);
  }

  #submit{
    position: absolute;
    bottom: 20px;
    right: 50%;
    transform: translateX(180px);
  }

  #progress-area{
    margin: 80px 0;
  }

  #progress-area p{
    margin: 30px 0;
  }

  .el-progress{
    width: 100%;
  }

  .el-button {
    margin: 5px;
    width: 100px;
    height: 40px;
    font-size: 15px;
    background-color: #323232;
  }

</style>
